<template>
	<view class="index-page">
		<view class="top-fixed">
			<view class="nav-bar" :style="{ height: navBarHeight }">
				<view class="area-select" @click="clickChooseArea">
					{{ nowArea }}
					<image class="arrow-icon" :src="baseIconUrl + 'icon_bottom_arrow.png'" mode="aspectFill" />
				</view>
				<view class="top-title">
					<image class="logo-img" :src="baseIconUrl + 'icon_index_logo.png'" mode="aspectFill" />
				</view>
			</view>
			<view class="search-box">
				<you-search pageTitle="搜索" placeholder="搜索店铺名称" searchUrl="/subPages/searchPage/indexSearch"
					@search="searchStore" @clear="clear"></you-search>
			</view>
		</view>
		<scroll-view scroll-y style="height: 100vh;padding-top: 262upx;">
			<view class="top-box">
				<view class="swiper-box">
					<uni-swiper-dot class="uni-swiper-dot-box" :info="bannerList" :current="current" :mode="mode"
						:dots-styles="dotsStyles" field="content" @clickItem="clickSwiperItem">
						<swiper class="swiper-list" @change="swiperChange" :current="swiperDotIndex">
							<swiper-item v-for="(item, index) in bannerList" :key="index">
								<view class="swiper-item" :class="'swiper-item' + index">
									<image class="swiper-img" :src="baseUrl + item.img" mode="aspectFill" />
								</view>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				</view>
			</view>
			<view class="notice-bar">
				<view class="bar">
					<image :src="'https://fx.fangxi666.com/prod-api/profile/upload/fangxiStatis/icons/icon_affiche.png'"
						mode="" class="bar-img"></image>
					<view style="width:100%;">
						<uni-notice-bar :showIcon="false" scrollable :text="noticeBar" background-color="#d8f1ec"
							color="#000"></uni-notice-bar>
					</view>
				</view>
			</view>
			<view class="operate-container">
				<view class="operate-box">
					<view class="operate">
						<view class="operate-item" v-for="(item, index) in operateConfig.slice(0,4)" :key="index"
							@click="clickOperateItem(item, index)">
							<view class="icon-box">
								<image class="operate-img" :src="baseUrl+item.tagImg" mode="aspectFill" />
							</view>
							<view class="name">{{ item.tagName }}</view>
						</view>
					</view>
				</view>
				<view class="operate-box">
					<view class="operate" style="margin-top: 10upx;">
						<view class="operate-item" v-for="(item, index) in operateConfig.slice(4)" :key="index"
							@click="clickOperateItem(item, index,'form')">
							<view class="icon-box">
								<image class="operate-img" :src="baseUrl+item.tagImg" mode="aspectFill" />
							</view>
							<view class="name">{{ item.tagName }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="store-box">
				<view class="title">全部门店</view>
				<view class="common-no-data" v-if="!storeList || storeList.length === 0" style="height: 22vh;">
					<view class="text">暂无门店~</view>
				</view>
				<store-list :storeList="storeList" v-else></store-list>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import StoreList from '../subPages/components/storeList.vue'
	import {
		baseUrl,
		baseIconUrl,
		baseImgUrl
	} from '@/config'
	export default {
		name: 'Index',
		components: {
			StoreList
		},
		data() {
			return {
				baseUrl,
				baseIconUrl,
				baseImgUrl,
				navBarHeight: '',
				scrollHeight: '',
				nowArea: '武汉市',
				current: 0,
				swiperDotIndex: 0,
				mode: 'round',
				dotsStyles: {
					backgroundColor: 'rgba(255, 255, 255, .5)',
					border: 'none',
					selectedBackgroundColor: '#FFF',
					selectedBorder: 'none'
				},
				bannerList: [],
				operateConfig: [
					// { name: '五金类', key: 'hardware', icon: 'icon_hardware.png' },
					// { name: '砂石类', key: 'dinas', icon: 'icon_sand.png' },
					// { name: '网格布线', key: 'gridCabling', icon: 'icon_grid.png' },
					// { name: '油漆涂料', key: 'paint', icon: 'icon_paint.png' },
					// { name: '五金类', key: 'hardware', icon: 'icon_hardware.png' },
					// { name: '砂石类', key: 'dinas', icon: 'icon_sand.png' },
					// { name: '网格布线', key: 'gridCabling', icon: 'icon_grid.png' },
					// { name: '油漆涂料', key: 'paint', icon: 'icon_paint.png' }
				],
				storeList: [],
				cityObject: {},
				noticeBar: '',
			}
		},
		async onLoad() {
			this.navBarHeight = this.$store.getters.heightData.navBarHeight + 'px'
			await this.getLocation()
			await this.getTags()
			let loginMode = uni.getStorageSync('roleId')
			if (loginMode === 4) {
				uni.reLaunch({
					url: '/subPages/otherPages/businessOrder'
				})
			} else if (loginMode === 3) {
				uni.reLaunch({
					url: '/subPages/otherPages/supplierOrder'
				})
			}
		},
		async onShow() {
			await this.getBanner()
			await this.getNoticeBar()
			const userInfo = this.$store.getters.userInfo
			const cityObject = this.$store.getters.city
			console.log(cityObject, "cityObject");
			if (cityObject && cityObject.cityString) {
				this.myAmapFun.getRegeo({
					location: `${cityObject.longitude},${cityObject.latitude}`,
					success: succ => {
						console.log('高德地图返回--->', succ)
						const datas = {
							// city: succ[0].regeocodeData.addressComponent.adcode,
							cityString: succ[0].regeocodeData.addressComponent.province.includes('市') ?
								succ[0].regeocodeData.addressComponent.province : succ[0].regeocodeData
								.addressComponent.city,
							longitude: cityObject.longitude,
							latitude: cityObject.latitude
						}
						this.cityObject = datas
						this.nowArea = succ[0].regeocodeData.addressComponent.province.includes('市') ?
							succ[0].regeocodeData.addressComponent.province : succ[0].regeocodeData
							.addressComponent.city
						// this.nowArea = succ[0].name
						this.getStoreList(datas)
					},
					fail: err => {
						console.log(err)
					}
				})
			}
			console.log('用户信息', userInfo)
		},
		onReady() {
			this.getTopBoxHeight()
		},
		methods: {
			//获取轮播图
			async getBanner() {
				const data = {
					isShow: 0
				}
				const res = await this.$GET('/fx/banner/list', data)
				console.log(res)
				if (res.code == 200) {
					this.bannerList = res.rows
				}
			},
			async clear() {
				console.log('这辈子有了')
				const data = {
					...this.cityObject,
					status: 1,
					isInitiate: 0
				}
				await this.getStoreList(data)
			},
			async searchStore(e) {
				console.log(e)
				console.log(this.cityObject);
				const data = {
					search: e,
					status: 1,
					isInitiate: 0,
					longitude: this.cityObject.longitude,
					latitude: this.cityObject.latitude,
					cityString: this.cityObject.cityString
				}
				const res = await this.$GET('/fx/store/portalSearch', data)
				if (res.code == 200) {
					console.log(res)
					let newArr = res.data.storesList.map((item) => {
						if (item.tegNames != null) {
							item.tegNames = item.tegNames.split(",")
						}
						return item
					})
					this.storeList = newArr
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
			getTopBoxHeight() {
				this.$nextTick(() => {
					// 创建查询对象
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this)

						// 选择我们想要的元素
						query.select('.top-box').boundingClientRect(data => {
							// data是一个包含元素尺寸信息的对象
							if (data) {
								// 获取元素高度
								const height = data.height
								this.scrollHeight = this.$store.getters.heightData.mainHeight -
									height + this.$store.getters.heightData.navBarHeight + 'px'
							}
						}).exec()
					}, 200)
				})
			},
			clickChooseArea() {
				uni.navigateTo({
					url: `/subPages/index/chooseArea`
				})
			},
			swiperChange(e) {
				this.current = e.detail.current
			},
			clickSwiperItem(e) {
				this.swiperDotIndex = e
			},
			clickOperateItem(item, index, type) {
				console.log(888, item, index);
				// if (item.type != 99 && item.type != 98) {
				// 	uni.navigateTo({
				// 		url: `/subPages/index/storeList?title=${item.tagName}&city=${JSON.stringify(this.cityObject)}&id=${item.id}`
				// 	})
				// } else if (item.type == 98) {
				// 	uni.navigateTo({
				// 		url: `/subPages/otherPages/becomeMerchant`
				// 	})
				// } else if (item.type == 99) {
				// 	uni.navigateTo({
				// 		url: `/subPages/otherPages/becomeSupplier`
				// 	})
				// }
				if (type) {
					uni.navigateTo({
						url: `/subPages/index/tabPage?id=${item.id}&bgImg=${item.bgImg}`
					})
				} else {
					uni.switchTab({
						url: `/pages/store`
					})
					const newItem = {
						...item
					}
					switch (item.id) {
						case 7:
							// 全屋定制
							newItem.id = 34
							break;
						case 8:
							// 门窗系统
							newItem.id = 35
							break;
						default:
							break;
					}
					uni.setStorageSync('item', JSON.stringify(newItem))
				}

			},
			async getTags() {
				const data = {
					type: 1
				}
				const newArr = [{
						tagName: '成为商户',
						tagImg: '',
						type: '98'
					},
					{
						tagName: '成为供应商',
						tagImg: '',
						type: '99'
					}
				]
				const res = await this.$GET('/fx/tag/list', data)
				console.log(res)
				if (res.code == 200) {
					// res.rows.concat(newArr)
					this.operateConfig = res.rows
				}
			},
			async getLocation() {
				await uni.getLocation({
					type: 'gcj02',
					// isHighAccuracy:true,
					success: res => {
						this.myAmapFun.getRegeo({
							location: `${res.longitude},${res.latitude}`,
							isHighAccuracy: true,
							success: succ => {
								console.log(res, 'gcj02')
								console.log('高德地图返回--->', succ)
								const datas = {
									// city: succ[0].regeocodeData.addressComponent.adcode,
									cityString: succ[0].regeocodeData.addressComponent
										.city,
									longitude: res.longitude,
									latitude: res.latitude
								}
								console.log(datas);
								this.cityObject = datas
								this.nowArea = succ[0].regeocodeData.addressComponent.city
								this.getStoreList(datas)
							},
							fail: err => {
								console.log(err)
							}
						})
					},
					fail: error => {
						console.log(error)
					}
				})
			},
			async getStoreList(datas) {
				const data = {
					// city: datas.city,
					status: 1,
					isInitiate: 0,
					cityString: datas.cityString,
					longitude: datas.longitude,
					latitude: datas.latitude
				}
				console.log(data);
				const res = await this.$GET('/fx/store/listApp', data)
				console.log('城市', res)
				if (res.code == 200) {
					let newArr = res.data.map((item) => {
						if (item.tegNames != null) {
							item.tegNames = item.tegNames.split(",")
						}
						return item
					})
					this.storeList = newArr
				}
			},
			async getNoticeBar() {
				const res = await this.$GET('/fx/notice/strList')
				if (res.code == 200) {
					this.noticeBar = res.msg
				}
			},
			areaClick() {
				uni.navigateTo({
					url: `/subPages/index/chooseArea`
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.top-fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 262upx;
		background-color: #086954;
		z-index: 1;

		.nav-bar {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			padding-bottom: 26rpx;

			.area-select {
				position: absolute;
				left: 28rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #FFF;

				.arrow-icon {
					width: 20rpx;
					height: 16rpx;
					margin-left: 10rpx;
				}
			}

			.logo-img {
				width: 124rpx;
				height: 40rpx;
			}
		}
	}

	.top-box {
		// margin-top: 16vh;
		background: linear-gradient(to bottom, #086954, #FFF 80%);

		.swiper-box {
			padding: 20rpx 28rpx;
			padding-top: 10upx;

			.swiper-list {
				width: 100%;
				height: 320rpx;
				border-radius: 24rpx;
				overflow: hidden;

				.swiper-item {
					width: 100%;
					height: 320rpx;
					border-radius: 24rpx;
					overflow: hidden;

					.swiper-img {
						width: 100%;
						height: 100%;
						border-radius: 24rpx;
					}
				}
			}
		}
	}

	.notice-bar {
		width: 100%;
		background-color: #fff;
		padding: 0 28rpx;

		.bar {
			display: flex;
			align-items: center;
			height: 64rpx;
			border-radius: 16rpx;
			overflow: hidden;
			width: 100%;
			padding: 12rpx 16rpx;
			background-color: #d1f2ed;

			.bar-img {
				width: 88rpx;
				height: 40rpx;
			}

			::v-deep .uni-noticebar {
				margin-bottom: 0 !important;
			}
		}
	}

	.operate-container {
		background-color: #FFF;
		width: 100%;
		paddig: 20upx 28rpx;

		.operate-box {
			flex-wrap: nowrap;
			margin: 0 28rpx;
			overflow: hidden;

			.operate {
				display: flex;
				// justify-content: space-around;
				align-items: center;
				border-radius: 24rpx;
				padding-top: 1 0rpx;
				margin: 20upx 0;
				// box-shadow: 0 0 5upx 2upx rgba(0, 0, 0, 0.5);

				.operate-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 25%;
					margin-bottom: 20rpx;

					.icon-box {
						width: 80rpx;
						height: 80rpx;

						// background-color: #d0e0dd;
						.operate-img {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}

					.name {
						font-size: 26rpx;
					}
				}
			}

		}

		.operate-box:nth-child(1) {
			border-bottom: 1rpx dotted #999;

			.operate {
				margin-bottom: 0rpx;
			}
		}

		.operate-box:nth-child(2) {
			padding-top: 20rpx;
		}
	}

	.store-box {
		width: 100%;
		// margin-top: 20rpx;
		padding: 0 28rpx;
		background-color: #FFF;

		.title {
			padding: 24rpx 0 20rpx;
			font-size: 32rpx;
			font-weight: 700;
		}
	}
</style>